<!DOCTYPE html>
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>RO机器人</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <!--<link rel="alternate icon" type="image/png" href="assets/i/favicon.png">-->
  <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
  
  <style>
    .customer-scrollable-vertical {
        height: 400px;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        resize: vertical;
    }
    .log-scrollable-vertical{
        height: 500px;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        resize: vertical;
        background: #F4F6F6;
    }
    .customer-time-log{
        color: #000000;
        padding-left: 2%;
    }
    .customer-normal-log{
        color: #D35400;
    }
    .customer-error-log{
        color: rgb(247, 16, 27);
    }
    .get {
      background: #1E5B94;
      color: #fff;
      text-align: center;
      padding: 100px 0;
    }

    .get-title {
      font-size: 200%;
      border: 2px solid #fff;
      padding: 20px;
      display: inline-block;
    }

    .get-btn {
      background: #fff;
    }

    .detail {
      background: #fff;
    }

    .detail-h2 {
      text-align: center;
      font-size: 150%;
      margin: 40px 0;
    }

    .detail-h3 {
      color: #1f8dd6;
    }

    .detail-p {
      color: #7f8c8d;
    }

    .detail-mb {
      margin-bottom: 30px;
    }

    .hope {
      background: #F9E79F;
      padding: 50px 0;
    }

    .hope-img {
      text-align: center;
    }

    .hope-hr {
      border-color: #149C88;
    }

    .hope-title {
      font-size: 120%;
    }

    .about {
      background: #fff;
      padding: 40px 0;
      color: #7f8c8d;
    }

    .about-color {
      color: #34495e;
    }

    .about-title {
      font-size: 180%;
      padding: 10px 0 20px 0;
      text-align: center;
    }

    .footer p {
      color: #7f8c8d;
      margin: 0;
      padding: 15px 0;
      text-align: center;
      background: #2d3e50;
    }
  </style>
</head>
<body>
    <!--这里是RoRobot-->
    <header class="am-topbar am-topbar-fixed-top">
        <div class="am-container">
            <h1 class="am-topbar-brand">RoRobot</h1>
            <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-secondary am-show-sm-only" data-am-collapse="{target: '#collapse-head'}">
                <span class="am-sr-only">导航切换</span>
                <span class="am-icon-bars"></span>
            </button>
        </div>
    </header>
    <!--这里是RoRobot-->
    <!--这里是全局配置-->
    <div class="hope">
        <div class="am-g am-container" style="margin-top:50px">
            <div class="am-u-lg-4 am-u-md-6 am-u-sm-12 hope-img">
                <img class="am-circle" alt="150*150" src="../image/app_192.png" width="140" height="140">
                <hr class="am-article-divider am-show-sm-only hope-hr">
            </div>
            <div class="am-u-lg-8 am-u-md-6 am-u-sm-12">

                <form class="am-form">
                    <fieldset>
                        <h2 class="hope-title">机器人服务器信息</h2>
                    
                        <div class="am-form-group">
                            <label for="ProxyIP">ProxyIP</label>
                            <input type="text"  id="ProxyIP" placeholder="127.0.0.1">
                        </div>
                    
                        <div class="am-form-group">
                            <label for="ProxyPort">ProxyPort</label>
                            <input type="number"  id="ProxyPort" placeholder="8001">
                        </div>
                        <div class="am-form-group">
                            <label for="ZoneID">ZoneID</label>
                            <input type="number"  id="ZoneID" placeholder="1001">
                        </div>
                    </fieldset>
                </form>

            </div>
        </div>
    </div>
    <!--这里是全局配置-->
    <!--这里是机器人配置-->
    <div class="about">
        <div class="am-u-lg-12">
            <h2 class="about-title about-color" id="NumLabel">机器人数量:1</h2>
        </div>
        <div class="am-g am-container customer-scrollable-vertical" id="RobotContainer">
                
                <!--************一个机器人配置****************-->
                <div class="am-form am-form-horizontal robot-config-box">
                    <!--账号-->
                    <div class="am-form-group">
                        <label for="user-name" class="am-u-sm-3 am-form-label">账号 / AccID</label>
                        <div class="am-u-sm-9">
                            <input type="number" id="user-name" placeholder="账号 / AccID">
                        </div>
                    </div>
                    <!--账号-->
                    <!--模块-->
                    <div class="am-form-group">
                        <label for="user-name" class="am-u-sm-3 am-form-label">模块 / ModuleID</label>
                        <div class="am-form-group">
                            <label class="am-checkbox-inline">
                                <input type="checkbox" value="1"> 登录
                            </label>
                            <label class="am-checkbox-inline">
                                <input type="checkbox" value="2"> 错误处理
                            </label>
                        </div>
                    </div>
                    <!--模块-->
                </div>
                <!--************一个机器人配置****************-->
            </div>
            <div class="am-g">  
                <div class="am-u-lg-6 am-u-md-4 am-u-sm-12">
                    <button type="button" class="am-btn am-btn-primary" id="AddRobotBtn" style="margin-left:200px;margin-top:20px;">添加机器人</button>
                </div>
                <div class="am-u-lg-6 am-u-md-4 am-u-sm-12">
                    <button type="button" class="am-btn am-btn-primary" id="StartRobot" style="margin-left:100px;margin-top:20px;">开始测试</button>
                </div>
            </div>
        </div>
    </div>
    <!--日志模块-->
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding am-padding-bottom-0">
                <div class="am-fl"><strong class="am-text-primary am-text-lg">机器人日志</strong>
                </div>
            </div>
    
            <hr>
            <div class="am-g error-log">
                    <div class="am-u-sm-12 am-u-sm-centered">
                    <div class="log-scrollable-vertical" id="LogBox">
                    </div>
                    </div>
                  </div>
                </div>
        </div>
    </div>
    <!--日志模块-->
</body>
<script>
    String.prototype.format = function() {  
            if (arguments.length == 0)  
                return this;  
            for (var s = this, i = 0; i < arguments.length; i++)  
                s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);  
            return s;  
        };
    var robotNum = 0
    var logOffset = 0
    $(document).ready(AfterLoad)

    function AfterLoad()
    {
        robotNum = 1
        $("#AddRobotBtn").click(AddRobotConfig)
        $("#StartRobot").click(StartRobot)
    }

    function AddRobotConfig()
    {
        robotNum++
        $("#NumLabel").html("机器人数量:"+robotNum)
        AddRobotWidget()
    }

    function AddRobotWidget()
    {
        var container = $("#RobotContainer")
        var widget = '<div class="am-form am-form-horizontal robot-config-box">'+
                        '<div class="am-form-group">'+
                        '<label for="user-name" class="am-u-sm-3 am-form-label">账号 / AccID</label>'+
                        '<div class="am-u-sm-9">'+
                            '<input type="number" id="user-name" placeholder="账号 / AccID">'+
                        '</div>'+
                    '</div>'+
                    '<div class="am-form-group">'+
                        '<label for="user-name" class="am-u-sm-3 am-form-label">模块 / ModuleID</label>'+
                        '<div class="am-form-group">'+
                            '<label class="am-checkbox-inline">'+
                                '<input type="checkbox" value="1"> 登录'+
                            '</label>'+
                            '<label class="am-checkbox-inline">'+
                                '<input type="checkbox" value="2"> 错误处理'+
                            '</label>'+
                        '</div>'+
                    '</div>'
        container.append(widget)
    }
    var timer = -1
    function StartTimer()
    {
        timer = setInterval(RefreshLog,5000)
        logOffset = 0
        $("#LogBox").html("")
    }

    var showlogReq = "start={0}"
    function RefreshLog()
    {
        data = showlogReq.format(logOffset)
        $.post("/showlog",data,AddLog)
    }

    var jsonTemplate = '{"global":{"proxyIP":"{0}","proxyPort":{1},"zoneId":{2}},'
    function StartRobot()
    {
        var robotjson = jsonTemplate.format($("#ProxyIP").val(),$("#ProxyPort").val(),$("#ZoneID").val())
        
        robotjson += '"robots":[';
        var robotList = $(".robot-config-box")
        for (let ri = 0; ri < robotList.length; ri++) {
            robotjson += '{"accid":'+robotList[ri].querySelector("input").value+','
            //console.log("accid = "+robotList[ri].querySelector("input").value)
            var checkedList = robotList[ri].querySelectorAll("div div input:checked")
            //console.log("length = "+checkedList.length)
            robotjson += '"logicModule":['
            for (let index = 0; index < checkedList.length; index++) 
            {
                //console.log("value "+checkedList[index].value);
                robotjson += checkedList[index].value
                if ((index+1) < checkedList.length)
                {
                    robotjson += ','
                }
            }
            robotjson += ']}'
            if ((ri+1) < robotList.length)
            {
                robotjson += ','
            }
        }
        robotjson += ']}'
        console.log(robotjson)
        $.post("/startrobot",robotjson,function(data,status){
            console.log("startrobot callback "+status)
            console.log("startrobot callback "+data)
            console.log("开启定时器")

            StartTimer()
            
        })
    }

    logNormalItem = '<span class="customer-time-log">[{0}]</span><span class="customer-normal-log">[LOG]</span><span class="customer-normal-log">[{1}]{2}</span><br>'
    logErrorItem = '<span class="customer-time-log">[{0}]</span><span class="customer-error-log">[ERROR]</span><span class="customer-error-log">[{1}]{2}</span><br>'
    function AddLog(data,status,jqXHR)
    {
        var logsize = parseInt(jqXHR.getResponseHeader('logsize'))
        console.log("logsize = ",logsize)
        if(logsize == 0)
        {
            console.log("没有更多日志,关闭定时器")
            //没有更多日志,关闭
            clearInterval(timer)
            return
        }
        //记录文件偏移
        logOffset += logsize

        var container = $("#LogBox")
        lines = data.split("\n")
        console.log(lines)
        for (let index = 0; index < lines.length; index++) 
        {
            console.log(index+":"+lines[index])
            logcell = lines[index].split('|')
            console.log("logcell length = "+logcell.length)
            
            if (logcell.length < 4)
            {
                container.append('<span class="customer-time-log">'+lines[index]+'</span><br>')
                if(lines[index].match("MISSION COMPLETED"))
                {
                    //暂停定时器
                    //clearInterval(timer)
                    break
                }
            }
            else
            {
                var logItem;
                if(logcell[1] === "LOG")
                {
                    logItem = logNormalItem.format(logcell[0], logcell[2],logcell[3])
                }
                if(logcell[1] === "ERROR")
                {
                    logItem = logErrorItem.format(logcell[0], logcell[2],logcell[3])
                }
                container.append(logItem)
            }
        }//end for (let index = 0; index < lines.length; index++)
    }//end function AddLog(data,status,jqXHR)
</script>
</html>
